<script setup lang="ts">
import { IntercityOrderStatus, OrderStatus, getIntercityOrderStatusString, getOrderStatusString } from '@/types/enum'

const props = defineProps<{
  title: string
  type: 'normal' | 'intercity'
  status: OrderStatus | IntercityOrderStatus
  createdAt: string
  price: string
  from: string
  to: string
  isComment?: boolean
}>()

defineEmits([
  'onTapCancel',
  'onTapContactDriver',
  'onTap110',
  'onTapContactPlatform',
  'onTapIssueInvoice',
  'onTapRateDriver',
  'onTapViewRate',
  'onTapCancelReason',
])

const tagColor = computed(() => {
  if (props.type === 'intercity') {
    const colors = {
      [IntercityOrderStatus.已下单]: '#3F8BF6',
      [IntercityOrderStatus.已完成]: '#0EBA5F',
      [IntercityOrderStatus.待审核]: '#FFC05D',
      [IntercityOrderStatus.已取消]: '#D4D4D4',
    }
    return colors[props.status as IntercityOrderStatus]
  }
  else {
    const colors = {
      [OrderStatus.待接单]: '#3F8BF6',
      [OrderStatus.待到达]: '#FA662F',
      [OrderStatus.进行中]: '#F53B25',
      [OrderStatus.已完成]: '#0EBA5F',
      [OrderStatus.待审核]: '#FFC05D',
      [OrderStatus.已取消]: '#D4D4D4',
    }
    return colors[props.status as OrderStatus]
  }
})
</script>

<template>
  <view class="mb-24rpx rounded-20rpx bg-white px-30rpx py-40rpx">
    <!-- 头部 -->
    <view class="flex items-center justify-between">
      <!-- 头部左侧 -->
      <view class="h-38rpx flex items-center overflow-visible">
        <view class="text-32rpx text-#333333 font-bold leading-38rpx">
          {{ title }}
        </view>
        <Spacer width="8" />
        <view
          class="rounded-10rpx px-14rpx py-9rpx text-26rpx text-white font-medium leading-26rpx"
          :style="{ backgroundColor: tagColor }"
        >
          {{ type === 'normal' ? getOrderStatusString(status as OrderStatus) : getIntercityOrderStatusString(status as IntercityOrderStatus) }}
        </view>
      </view>
      <!-- 头部右侧 -->
      <view class="text-34rpx text-#F53B25 font-bold leading-38rpx">
        {{ `${price}元` }}
      </view>
    </view>
    <Spacer height="24" />
    <!-- 时间 -->
    <view class="leaidng-24rpx text-24rpx text-#999999 font-medium">
      {{ createdAt }}
    </view>
    <Spacer height="24" />
    <!-- from -->
    <view class="flex items-center">
      <view class="mr-15rpx h-12rpx w-12rpx rounded-full bg-#3F8BF6" />
      <view class="text-28rpx text-#666666 font-medium leading-28rpx">
        {{ from }}
      </view>
    </view>
    <Spacer height="24" />
    <!-- to -->
    <view class="flex items-center">
      <view class="mr-15rpx h-12rpx w-12rpx rounded-full bg-#FA662F" />
      <view class="text-28rpx text-#666666 font-medium leading-28rpx">
        {{ to }}
      </view>
    </view>
    <Spacer height="34" />
    <Divider width="642" color="#EBEBEB" />
    <Spacer height="34" />
    <!-- 按钮 -->
    <view class="flex justify-end">
      <view class="flex items-center space-x-20rpx">
        <block v-if="type === 'intercity'">
          <block v-if="status === IntercityOrderStatus.已下单">
            <RGButton type="secondary" size="small" corner="small" @tap.stop="$emit('onTapCancel')">
              取消订单
            </RGButton>
            <RGButton size="small" corner="small" @tap.stop="$emit('onTapContactPlatform')">
              联系平台
            </RGButton>
          </block>
          <block v-if="status === IntercityOrderStatus.已完成">
            <RGButton type="secondary" size="small" corner="small" @tap.stop="$emit('onTapIssueInvoice')">
              开具发票
            </RGButton>
          </block>
          <block v-if="status === IntercityOrderStatus.待审核">
            <RGButton size="small" corner="small" @tap.stop="$emit('onTapContactPlatform')">
              联系平台
            </RGButton>
          </block>
          <block v-if="status === IntercityOrderStatus.已取消">
            <RGButton type="secondary" size="small" corner="small" @tap.stop="$emit('onTapCancelReason')">
              取消原因
            </RGButton>
          </block>
        </block>
        <block v-else>
          <block v-if="status === OrderStatus.待接单">
            <RGButton type="secondary" size="small" corner="small" @tap.stop="$emit('onTapCancel')">
              取消订单
            </RGButton>
          </block>
          <block v-if="status === OrderStatus.待到达">
            <RGButton type="secondary" size="small" corner="small" @tap.stop="$emit('onTapCancel')">
              取消订单
            </RGButton>
            <RGButton size="small" corner="small" @tap.stop="$emit('onTapContactDriver')">
              联系司机
            </RGButton>
          </block>
          <block v-if="status === OrderStatus.进行中">
            <RGButton type="error" size="small" corner="small" @tap.stop="$emit('onTap110')">
              一键报警
            </RGButton>
            <RGButton type="primary" size="small" corner="small" @tap.stop="$emit('onTapContactPlatform')">
              联系平台
            </RGButton>
          </block>
          <block v-if="status === OrderStatus.已完成">
            <RGButton type="secondary" size="small" corner="small" @tap.stop="$emit('onTapIssueInvoice')">
              开具发票
            </RGButton>
            <RGButton
              type="primary"
              size="small"
              corner="small"
              @tap.stop="isComment ? $emit('onTapViewRate') : $emit('onTapRateDriver')"
            >
              {{ isComment ? '查看评价' : '评价司机' }}
            </RGButton>
          </block>
          <block v-if="status === OrderStatus.已取消">
            <RGButton type="secondary" size="small" corner="small" @tap.stop="$emit('onTapCancelReason')">
              取消原因
            </RGButton>
          </block>
        </block>
      </view>
    </view>
  </view>
</template>
